<template>
    <div class="mainCenter">
        <div class="title">轮播图管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form >
                    <el-form-item>
                        <el-input type="text" placeholder="搜索关键词" v-model="searchList.keyWord"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-select v-model="searchList.state" placeholder="全部">
                            <el-option :label="'下线'" :value="'0'"></el-option>
                            <el-option :label="'上线'" :value="'1'"></el-option>
                            <el-option :label="'废除'" :value="'2'"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchBanner"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                            <el-button type="primary" @click="reset"><el-icon><RefreshRight /></el-icon>重置</el-button>   
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="danger" @click="deleteBannerMore"><el-icon>
                            <Delete/>
                        </el-icon>批量删除({{seletArray.length}})</el-button>
                    <el-button type="primary" @click="addBanner"><el-icon>
                            <Plus />
                        </el-icon>添加轮播图</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="bannerList" @selection-change="getMore">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="lid" label="轮播编号" width="100" />
                <el-table-column  label="轮播图片" width="250">
                    <template #default="scope">
                        <div class="imgBox">
                            <a :href="scope.row.bannerimage"><img :src="scope.row.bannerimage" alt=""></a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="bannrname" label="轮播标题" />
                <el-table-column prop="remark" label="轮播描述" />
                <el-table-column label="轮播状态">
                    <template #default="scope">
                        <p v-if="scope.row.state=='0'" style="color: #409eff;">下线</p>
                        <p v-if="scope.row.state=='1'" style="color:#4ee617;">上线</p>
                        <p v-if="scope.row.state=='2'" style="color: #f64358;">废除</p>
                    </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editBanner(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteBanner(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 

             background layout="total, sizes, prev, pager, next" 
             :page-sizes="[5, 10]"
             :total="count" style="float: right;margin-top: 20px;"
             v-model:current-page="page"
             v-model:page-size="limit"
             @current-change="jumpPage"
             @size-change="changeLimit"
            />
            <el-drawer title="轮播操作" direction="btt" size="600px" v-model="isChange">
                <EditBanner :bannerInfo="bannerInfo" @emit-change="changeBool"></EditBanner>
            </el-drawer>
            
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqDeleteBannerOne, reqGetBannerList, reqSearch } from '@/api/common';
import EditBanner from './componets/EditBanner.vue';
import { BannerType } from '@/types/banner';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, ref } from 'vue';
const searchList=ref<any>({
    keyWord:'',
    state:null
})
const isSearch=ref<boolean>(false)
const bannerList=ref<Array<BannerType>>([])
const count=ref<number>(0)
const bannerInfo=ref<BannerType|null>(null)
const page=ref<number>(1)
const limit=ref<number>(5)
const seletArray=ref<Array<BannerType>>([])
const isChange=ref<boolean>(true)
const changeLimit=()=>{
    if(!isSearch){
        getBannerList(page.value,limit.value)
    }else{
        searchPagtions()
    }
}
const jumpPage=()=>{
    if(!isSearch){
        getBannerList(page.value,limit.value)
    }else{
        searchPagtions()
    }
}

const reset=()=>{
    history.go(0)
}

const getBannerList=(page:number,limit:number)=>{
    reqGetBannerList(page,limit).then(res=>{
        console.log(res);
        
        count.value=res.data.data.count
        bannerList.value=res.data.data.data
    })
}

const getMore=(value:any)=>{
    seletArray.value=value
}

const addBanner=()=>{
    isChange.value=true
    bannerInfo.value=null
}
const searchBanner=()=>{
    isSearch.value=true
    page.value=1;
    searchPagtions()
}

const searchPagtions=()=>{
    console.log(searchList.value.state);
    
    reqSearch(searchList.value.keyWord,searchList.value.state,limit.value,page.value).then(res=>{
        console.log(res.data.data);
        bannerList.value=res.data.data.data
        count.value=res.data.data.count
    })
}
const editBanner=(idx:number,info:BannerType)=>{
    isChange.value=true
    bannerInfo.value=info
}
const deleteBannerMore=()=>{
        tip("功能未开放","warning")    
}
const changeBool=(bool:boolean)=>{
    isChange.value=bool
}
const deleteBanner=(idx:number,info:BannerType)=>{
    elementConfirm().then(async()=>{
        console.log(info);
        let res:any=await reqDeleteBannerOne(info.lid as number)
        await getBannerList(page.value,limit.value)
        tip(res.data.info,"success")
    })
}

onMounted(()=>{
    isChange.value=false
    getBannerList(page.value,limit.value)
})
</script>

<style scoped lang="scss">
.imgBox{
    width: 200px;
    height: 70px;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
    }
}
:deep(.el-drawer) {
    border-radius: 5px;
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -300px;
}
</style>